<template>
  <p-border>
    <div class="home-content">
      <el-row :gutter="20" class="height-2">
        <el-col :span="6">
          <b-list ref="buildingNum" class="height-1"></b-list>
          <b-bar ref="buildingYear" class="height-1"></b-bar>
        </el-col>
        <el-col :span="14">
          <b-map ref="alarmMap" class="height-5"></b-map>
        </el-col>
        <el-col :span="4" >
          <b-pie title="年巡检任务" class="height-1"></b-pie>
          <b-pie title="周巡检任务" class="height-1"></b-pie>
        </el-col>
      </el-row>


      <el-row :gutter="20" class="height-4">
        <el-col :span="10">
          <b-table
              ref="alarmTable"
              class="height-3"
              @current-change="getAlarmData">
          </b-table>
        </el-col>
        <el-col :span="10">
          <b-table
              ref="warnTable"
              title="人工巡检异常工程信息"
              class="height-3"
              @current-change="getWarinData">
          </b-table>
        </el-col>
        <el-col :span="4">
          <b-pie title="日巡检任务" class="height-3"></b-pie>
        </el-col>
      </el-row>
    </div>


      <!--<b-list></b-list>-->
      <!--<b-pie></b-pie>-->
      <!--<b-bar></b-bar>-->

    <!--</div>-->

  </p-border>
</template>

<script>
// @ is an alias to /src
import PBorder from '@/components/p-border/p-border'
import BList from '@/components/b-list/b-list'
import BPie from "../components/b-pie/b-pie";
import BBar from "../components/p-bar/p-bar";
import BMap from "../components/b-map/b-map";
import BTable from "../components/b-table/b-table";

import * as EquipAPI from '@/api/equip'


export default {
  name: 'home',
  components: {
    BMap,
    BBar,
    BPie,
    PBorder,
    BList,
    BTable
  },
  data(){
    return {
      timer10s:null,
      timer1h:null
    }
  },
  methods:{
    getBuildingYearData(){
      EquipAPI.getBuildingYear({

      }).then(res=>{
        const {projectNum,equipNum,dataNum,buildAge}=res.data.Data;
        let x=[];
        let y=[];
        for(let i=0;i<buildAge.length;i++){
          x.push(buildAge[i].x);
          y.push(buildAge[i].y);
        }

        this.$nextTick(_=>{
          this.$refs.buildingYear.changeChart(x,y)
          this.$refs.buildingNum.changeListData([projectNum,projectNum,dataNum,equipNum])
        })


      }).catch(err=>{
        console.log(err)
      });
   },
    getMapData(){
      EquipAPI.getMapData({

      }).then(res=>{
        let data=res.data.Data;

        this.$nextTick(_=>{
          this.$refs.alarmMap.changeMapData(data)
        })

      }).catch(err=>{
        console.log(err)
      })
    },
    getAlarmData(pageNo){
      EquipAPI.getAlarmData({
        pageNo:pageNo
      }).then(res=>{
        const {Total,Data}=res.data;


          this.$refs.alarmTable.changeTableData(Data,Total)

      }).catch(err=>{
        console.log(err)
      })
    },
    getWarinData(pageNo){
      EquipAPI.getWarnData({
        pageNo:pageNo
      }).then(res=>{
        const {Total,Data}=res.data;

        this.$refs.warnTable.changeTableData(Data,Total)
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  computed:{
  },
  created(){
    this.getBuildingYearData()
    this.getMapData()
    this.getAlarmData(1)
    this.getWarinData(1)

    this.timer10s=setInterval(()=>{
      this.$refs.alarmTable.changePageNo()
      this.$refs.warnTable.changePageNo()
    },10000);

    this.timer1h=setInterval(()=>{
      this.getMapData();
      this.getBuildingYearData()
    },3600000);
  },
  beforeDestroy(){
    clearInterval(this.timer10s);
    clearInterval(this.timer1h);
  }
}
</script>

<style lang="scss">
  .home-content{
    position: absolute;
    top:10%;
    bottom:6%;
    left:4%;
    right: 4%;
    height:calc(100% - 16%);



    .el-col{
      height: 100%;
    }

    .height-1{
      height: calc((100% - 100px)/2);
      margin-bottom: 20px;
    }

    .height-2{
      height: calc((100% - 40px)*2/3 + 20px);
      margin-bottom: 20px;
    }

    .height-4{
      height: calc((100% - 160px)/3 );
    }


    .height-3{
      height: 100%;
    }

    .height-5{
      position: relative;
      top:6%;
      height: 94%;
    }


  }

</style>
